<template>
  <view class="vision">
    <view class="container">
      <view class="box">
        <text></text>
        <text class="text">温馨提示:选项都是默认位“否”,存在该症状请点击“是”</text>
        <scroll-view class="scroll">
          <view class="button_container">
            <view class="text_button"><text>药物选择</text></view>
            <view class="box_button">
              <button v-for="(type,index1) in state.types" :key="index1" 
              @tap="selectedType(type.id,index1)" :class="['button',{'button_selected':selectedId===index1}]">
              {{ type.chineseName }}
            </button>
            </view>
          </view>
          <view v-if="flag" class="desc">
            <view><text class="desc_text">{{ state.name }}：</text></view>
            <view><text>导致跌倒的原因：</text></view>
            <view><text>{{ state.description }}</text></view>
            <view><text class="desc_text">请选择患者存在的增加跌倒风险的药物</text></view>
          </view>
          <view class="question-container" v-for="(question, index) in state.questions" :key="index"> 
            <text class="question">{{ index+1 }}.{{ question.content }}</text>
            <view class="border"></view>  
              <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
                <label class="radio-label" v-for="(option,index_option) in state.options" :key="index_option">  
                  <radio :value="option.value" :checked="option.value === 'no'"/>
                  <text>{{ option.label}}</text>
                </label>  
              </radio-group>  
            </view>
        </scroll-view>
      </view>
    </view>
    <view class="foot_box">
      <view class="foot-container"> 
        <text class="foot1" @tap="back">上一步</text>
        <text class="foot2">3/8</text>
        <text class="foot3" @tap="next">下一步</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {useMedicineStore} from '@/stores/modules/medicine.ts'
import {getMedicineCategoryApi,getMedicineListApi,postMedicineApi} from '@/apis/medicine/medicine'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
const back = ()=>{
 uni.navigateBack()
}
const next =async ()=>{
  console.log('我是提交的selected:',selected)
  const res = await postMedicineApi(selected)
  console.log(res.msg)
  console.log(res.code)
 uni.navigateTo({ url: '/pages/fallRiskList/components/lowBloodPressure/lowBloodPressure'})
}
const state = reactive({
  questions:[],
  questions1:[],
  types:[],
  name:'',
  description:'',
  options:[
  {value:'yes',label:'是'},
  {value:'no',label:'否'},
  ]
})
const current = ref(1)
const selected=[]//存放每个问题
const medicineStore = useMedicineStore()
const handleRadioChange = (index,question,targetValue)=>{//radio框的值改变触发回调函数
  let isExist = selected.findIndex(item => item.tsBaseMedicineId === question.id)//找下标值
  if(targetValue==='yes')
  {
    if(isExist !== -1)
    {
      selected[isExist].result=1
    }
    else{
      selected.push({mark:useMark.mark,tsBaseMedicineId:question.id,result:1})
    }
  }
  else{
    if(isExist !== -1)
    {
      selected[isExist].result=0
    }
    else{
      selected.push({mark:useMark.mark,tsBaseMedicineId:question.id,result:0})
    }
  }
}
 const setSelected = ()=>{
  for(let i=0;i<state.questions1?.length;i++)
{
  selected.push({mark:useMark.mark,tsBaseMedicineId:state.questions1[i]?.id,result:0})
}
console.log('我是seleted',selected) 
} 
const flag = ref(false)
const selectedId = ref('')
const selectedType =async (id,index)=>{
  selectedId.value = index
  flag.value = true
  state.name = state.types[index]?.name
  state.description = state.types[index]?.description
  const res = await getMedicineListApi(id)
  state.questions = res.data
  state.options=[
  {value:'yes',label:'是'},
  {value:'no',label:'否'}
  ]
  console.log("问题",state.questions)
}
/* const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0)
const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
} */
onLoad(async()=>{
  const res = await getMedicineCategoryApi()
  state.types = res.data
  console.log('类型:',state.types)
  getUuid()
  for(let i=0;i<state.types.length;i++)
  {
    const result1 = await getMedicineListApi(state.types[i].id)
    result1.data.forEach(element => {
      state.questions1.push(element)
    });
  }
  setSelected()
})
</script>

<style lang="scss">
page {
 background-color: rgb(10,127,255);
}
.vision{
  height: 100vh;
  position: relative;
.container{
  height: 100vh;
  margin: 30rpx;
  background-color: #fff;
  border-radius: 15rpx;
 .box{
   border-radius: 20rpx;
   background-color: #fff;
   .button_container{
    background-color: rgb(240,247,255);
    margin: 25rpx;
    border-radius: 15rpx;
    .text_button{
      margin: 20rpx;
      padding-top: 10rpx;
      color: black;
      font-size: 35rpx
    }
    .box_button{
    display: flex;
    padding-left: 15rpx;
    padding-bottom: 25rpx;
    margin-right: 10rpx;
    .button{
      background-color: rgb(255,161,38);
      color: #fff;
      font-size: 30rpx;
    }
    .button_selected{
      background-color: rgb(72,114,255);
    }
    }
   }
   .text{
 font-size: 25rpx;
 color:red;
 margin-left: 50rpx;
 margin-top: 20rpx;
}
.scroll{
  padding-bottom: 120rpx;
  .desc{
    margin: 40rpx;
    line-height: 50rpx;
    .desc_text{
      font-size: 30rpx;
      font-weight: bold;
    }
  }
.question-container {  
  margin-bottom: 40rpx;/* 每个问题之间的间距 */  
.question {   
  margin-bottom: 40rpx; 
  margin-left: 50rpx;
}  
.border{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-bottom: 15rpx;
}
.radio-group {   
  margin-left: 50rpx;
.radio-label {   
  padding-top: 30rpx; 
  padding-right: 200rpx; 
}  
}
}
}
}
}
.foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
        font-size: 35rpx;
        color: black;
      }
      .foot2{
        text-align: center;
      }
    }
  }
}
</style>